<#include "../common/_header.htm">
<div id="hidebox" >
    <div class="box-body">
		<table id="dg"></table>
		<!-- <table id="accountBodyTransTable" style="width:2400px;"></table> -->
	</div>
</div>
<script>
	window.onload = firstTable;
	function firstTable(){
		/** 回去传值 **/
		var dialog = top.dialog.get(window);
		var accountBody = dialog.data.accountBody; // 获取对话框传递过来的数据
		var cardNumbers = dialog.data.cardNumbers; // 获取对话框传递过来的数据
	    $('#dg').datagrid({
	        method : 'post', // 服务器数据的请求方式 get or post
	        url : "${ctx}/bill/stream/d3/moreAccountBodyCardsTramnsDetails",//请求数据url
	        queryParams : {
                accountBody : accountBody,
                caseId : dialog.data.caseId,
                cardNumbers : cardNumbers
	        },
	        pagination: true,//允许分页
            rownumbers: true,//行号
            emptyMsg:"暂无信息",//加载数据为空时的信息
            singleSelect: false,//只选择一行
            pageSize: 20,//每一页数据数量
            checkOnSelect: false,
            autoRowHeight : false,//定义是否设置基于该行内容的行高度。设置为 false，则可以提高加载性能。
            fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
            pageList: [20, 50, 100,200],//在设置分页属性的时候初始化页面大小选择列表。
	        //表格的列
	        columns: [[
	            {
	                field: 'accountBodyCard',//域值
	                title: '卡号',//标题
	                visible: true,//false表示不显示
	                sortable: false
	            },
	            {
	                field: 'accountBodyBank',//域值
	                title: '归属行',//内容
	                visible: true
	            },
	            {
	                field: 'tranNumber',//域值
	                title: '交易次数',//内容
	                sortable: true,//启用排序
	                visible: true
	            },
	            {
	                field: 'balance',//域值
	                title: '交易金额',//内容
	                visible: true,//false表示不显示
	                formatter:function (value,row,index) {
	                    if(!value) return 0;
	                    if (Number.isInteger(value)) {
	                        return value.toString().replace(/(\d)(?=(\d{3})+$)/g,'$1,');
	                    } else {
	                        return value.toString().replace(/(\d)(?=(\d{3})+\.)/g,'$1,');
	                    }
	                }
	            }
	        ]],
	        onHeaderContextMenu: function(e, field){
                e.preventDefault();
                if (!cmenu){
                    createColumnMenu();
                }
                cmenu.menu('show', {
                    left:e.pageX,
                    top:e.pageY
                });
            }
	    });
	};
	/*列显示下拉框*/
    var cmenu;
    function createColumnMenu(){
        cmenu = $('<div/>').appendTo('body');
        cmenu.menu({
            onClick: function(item){
                if (item.iconCls == 'icon-ok'){
                    $('#dg').datagrid('hideColumn', item.name);
                    cmenu.menu('setIcon', {
                        target: item.target,
                        iconCls: 'icon-empty'
                    });
                } else {
                    $('#dg').datagrid('showColumn', item.name);
                    cmenu.menu('setIcon', {
                        target: item.target,
                        iconCls: 'icon-ok'
                    });
                }
            }
        });
        var fields = $('#dg').datagrid('getColumnFields');
        for(var i=0; i<fields.length; i++){
            var field = fields[i];
            var col = $('#dg').datagrid('getColumnOption', field);
            cmenu.menu('appendItem', {
                text: col.title,
                name: field,
                iconCls: 'icon-ok'
            });
        }
    };
</script>
<style>
	#hidebox {
	   top: 23px;
	   left: 2%;
	   border-radius: 5px;
	   background-color:#fff;
	   z-Index:9999;
	   padding: 10px;
	   overflow:hidden;
	   height:100%;
	   width:100%；
	}
</style>
</body>
</html>
